import React, { Component } from 'react';
import { Button, Modal, Form, Drawer, PageHeader, Divider, Badge, Radio, Checkbox, Row, Card, Layout, List, Timeline } from 'antd';
import '@/assets/css/settings';
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout';
import { BasicPagination, isInvalidObject, compareNum, openSuccessModal, openModalMessage, compareString, TableCustomize } from '../../../components/TableCustomize'
import { withPermission } from '../../../components/withpermission';
import axios from 'axios';
import { checkResultList } from '../../../utils/global';
import { withRouter } from 'react-router';
const CreateButton = withPermission(Button, 'create')
const { confirm } = Modal

class AssemblyAbnormal_details extends Component {
	state = {
		typeList: ['jpg', 'jpeg', 'gif', 'png', 'bmp'],
		record: {},
		processInstance: {},
		searchItemFather: {},
		previewVisible: false,
		previewImage: '',
		pdfVisible: false,
		pdfURL: '',
	};
	componentDidMount() {
		// console.log(this.props.location.data)
		this.setState({
			processInstance: this.props.location?.data?.processInstance ? this.props.location.data.processInstance : JSON.parse(localStorage.getItem('AssemblyAbnormal_detailList'))?.processInstance,
			record: this.props.location?.data?.record ? this.props.location.data.record : JSON.parse(localStorage.getItem('AssemblyAbnormal_detailList'))?.record,
			searchItemFather: this.props.location?.data?.searchItem ? this.props.location.data.searchItem : JSON.parse(localStorage.getItem('AssemblyAbnormal_searchItem')),
		})
	}
	componentWillUnmount() {
		this.setState = () => {
			return;
		};
	}
	// 预览图片
	showPicture = (url) => {
		this.setState({ previewImage: url, previewVisible: true })
	}
	// 预览pdf文件
	showPdf = (url) => {
		this.setState({ pdfURL: url, pdfVisible: true })
	}

	openFiles = (data) => {
		const { typeList } = this.state
		console.log(data);
		let a = typeList.find(e => e == data.fileType)
		if (a) {
			this.showPicture(data?.fileUrl)
		} else if (data.fileType == 'pdf') {
			this.showPdf(data?.fileUrl)
		} else {
			// openModalMessage('warning', '该文件格式无法在线预览，请下载查看！')
			confirm({
				title: '提示',
				content: '该文件格式无法在线预览，请下载查看！',
				okText: '下载',
				cancelText: '取消',
				onOk: async () => {

					let fileUrl = 'http://192.168.31.220:8301/upload/mes/default/echarts-1651117479.js'
					console.log(fileUrl);

					const link = document.createElement('a');
					link.setAttribute('href', fileUrl);
					link.setAttribute('download', data?.fileName);
					link.click();

					// axios({
					// 	method: 'get',
					// 	url: fileUrl,
					// 	responseType: 'blob'
					// }).then(res => {
					// 	if (!res) return
					// 	console.log(res.data);
					// 	let url = window.URL.createObjectURL(new Blob([res.data], { type: data?.fileType }))
					// 	// 创建A标签
					// 	let link = document.createElement('a')
					// 	link.style.display = 'none'
					// 	link.href = url
					// 	// 设置的下载文件文件名
					// 	const fileName = decodeURI(data?.fileName);
					// 	// 触发点击方法
					// 	link.setAttribute('download', fileName)
					// 	document.body.appendChild(link)
					// 	link.click()
					// })
				}
			})
		}
	}

	render() {
		const { searchItemFather, processInstance, record, previewVisible, previewImage, pdfURL, pdfVisible } = this.state;
		let operationRecords = processInstance?.operationRecords
		let formComponentValues = processInstance?.formComponentValues || []
		const titleStyle = {
			fontSize: 16,
			fontWeight: 'bold'
		}

		return (
			<div>
				<BasicLayoutSearch>
					<PageHeader
						style={{ padding: '4px 24px' }}
						onBack={() => this.props.history.push({ pathname: '/AssemblyAbnormal', data: searchItemFather })}
						title={`总装异常报告表详情`}>
					</PageHeader>
				</BasicLayoutSearch>
				<Layout className="layout-model">
					<div style={titleStyle}>基础信息</div>
					<Card size="small" style={{ width: '100%' }} bordered={false}>
						<div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>报告类别：{record?.reportType}</p>
								<p style={{ flex: 1 }}>总装车间：{record?.department}</p>
								<p style={{ flex: 1 }}>单据号：{record?.billNo}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>机型：{record?.model}</p>
								<p style={{ flex: 1 }}>批号：{record?.batchNo}</p>
								<p style={{ flex: 1 }}>装配机号：{record?.department}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>装配开始时间：{record?.assembleStartTime}</p>
								<p style={{ flex: 1 }}>第一交机时间：{record?.firstDeliveryTime}</p>
								<p style={{ flex: 1 }}>第一出机时间：{record?.firstOutputTime}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>异常原因：{record?.abnormalMsg}</p>
								<p style={{ flex: 1 }}>具体原因：{record?.specificMsg}</p>
								<p style={{ flex: 1 }}>异常内容：{record?.contentMsg}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>填报人：{record?.createrName}</p>
								<p style={{ flex: 1 }}>填报时间：{record?.createTime}</p>
								<p style={{ flex: 1 }}>审批结果：{record?.value}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>弃审人：{record?.reviewer}</p>
								<p style={{ flex: 1 }}>弃审原因：{record?.reviewerMsg}</p>
								<p style={{ flex: 1 }}></p>
							</div>
						</div>
						<div>
							{/* <div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>报告类别：{formComponentValues.find(e => e.name == '报告类别')?.value}</p>
								<p style={{ flex: 1 }}>总装车间：{formComponentValues.find(e => e.name == '总装车间')?.value}</p>
								<p style={{ flex: 1 }}>单据号：{formComponentValues.find(e => e.name == '单据号')?.value}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>机型：{formComponentValues.find(e => e.name == '机型')?.value}</p>
								<p style={{ flex: 1 }}>批号：{formComponentValues.find(e => e.name == '批号')?.value}</p>
								<p style={{ flex: 1 }}>装配机号：{formComponentValues.find(e => e.name == '装配机号')?.value}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>装配开始时间：{formComponentValues.find(e => e.name == '装配开始时间')?.value}</p>
								<p style={{ flex: 1 }}>第一交机时间：{formComponentValues.find(e => e.name == '第一交机时间')?.value}</p>
								<p style={{ flex: 1 }}>第一出机时间：{formComponentValues.find(e => e.name == '第一出机时间')?.value}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>异常原因：{formComponentValues.find(e => e.name == '异常原因')?.value}</p>
								<p style={{ flex: 1 }}>具体原因：{formComponentValues.find(e => e.name == '具体原因')?.value}</p>
								<p style={{ flex: 1 }}>异常内容：{formComponentValues.find(e => e.name == '异常内容')?.value}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>填报人：{formComponentValues.find(e => e.name == '填报人')?.value}</p>
								<p style={{ flex: 1 }}>填报时间：{formComponentValues.find(e => e.name == '填报时间')?.value}</p>
								<p style={{ flex: 1 }}>审批结果：{formComponentValues.find(e => e.name == '审批结果')?.value}</p>
							</div>
							<div style={{ display: 'flex' }}>
								<p style={{ flex: 1 }}>弃审人：{formComponentValues.find(e => e.name == '弃审人')?.value}</p>
								<p style={{ flex: 1 }}>弃审原因：{formComponentValues.find(e => e.name == '弃审原因')?.value}</p>
								<p style={{ flex: 1 }}></p>
							</div> */}
						</div>
					</Card>
					<Divider />
					<div style={titleStyle}>审批流程</div>
					<Card size="small" style={{ width: '100%' }} bordered={false}>
						<div style={{ paddingTop: 10 }}>
							<Timeline>
								{
									operationRecords && operationRecords.map((item, index) => {
										return <Timeline.Item key={index}>
											{item.operationType == 'START_PROCESS_INSTANCE' ?
												<div style={{ display: 'flex' }}>
													<div style={{ flex: 1 }}>填报人：{item?.username || '匿名用户'}</div>
													<div style={{ flex: 1 }}>填报时间：{item.date}</div>
													<div style={{ flex: 1 }}></div>
													<div style={{ flex: 1 }}></div>
												</div>
												:
												(item.operationType == 'ADD_REMARK' ?
													<div>
														<div style={{ display: 'flex' }}>
															<div style={{ flex: 1 }}>评论人：{item?.username || '匿名用户'}</div>
															{/* <div style={{flex: 1}}>审批人Id：{item.userid}</div> */}
															<div style={{ flex: 1 }}>评论时间：{item.date}</div>
															<div style={{ flex: 1 }}>备注：{item.remark}</div>
															<div style={{ flex: 1 }}></div>
														</div>
														<div>
															附件：
															{item.attachments ?
																item.attachments.map(a => {
																	return <span><a onClick={() => this.openFiles(a)}>{a?.fileName}</a>&emsp;&emsp;&emsp;&emsp;</span>
																})
																:
																null}
														</div>
													</div>
													:
													<div>
														<div style={{ display: 'flex' }}>
															<div style={{ flex: 1 }}>审批人：{item?.username || '匿名用户'}</div>
															{/* <div style={{flex: 1}}>审批人Id：{item.userid}</div> */}
															<div style={{ flex: 1 }}>审批结果：{item.operationResult == 'AGREE' ? '同意' : item.operationResult == 'REFUSE' ? '不同意' : null}</div>
															<div style={{ flex: 1 }}>审批时间：{item.date}</div>
															<div style={{ flex: 1 }}>备注：{item.remark}</div>
														</div>
														<div>
															附件：
															{item.attachments && item.attachments.map(a => {
																return <span><a onClick={() => this.openFiles(a)}>{a?.fileName}</a>&emsp;&emsp;&emsp;&emsp;</span>
															})}
														</div>
													</div>)

											}
										</Timeline.Item>
									})
								}
							</Timeline>
						</div>
					</Card>
				</Layout>
				{/* 预览图片 */}
				<Modal visible={previewVisible} footer={null} onCancel={() => this.setState({ previewVisible: false, previewImage: '' })}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
				{/* 预览pdf */}
				<Modal width={'800px'} visible={pdfVisible} footer={null} onCancel={() => this.setState({ pdfVisible: false, pdfURL: '' })}>
					<iframe src={pdfURL} width={'100%'} height={'500px'}></iframe>
				</Modal>
			</div>
		);
	}
}
export default Form.create()(withRouter(AssemblyAbnormal_details));